<template>
	<image @click="previewImage" :lazy-load="true" :style="style" @load="onLoads" :mode="mode" :src="urls || defaultImg"
		@error="onErrors">
	</image>
</template>

<script>
	import { array } from '@/libs/fn/verify.js'
	const userdefault = require('@/static/images/default/userdefault.png')
	const imagedefault = require('@/static/images/default/imagedefault.png')
	export default {
		name: "m-image",
		data() {
			return {
				urls: this.src,
			}
		},
		props: {
			src: String,
			isPreview: {
				type: Boolean,
				default: false //是否可预览图片
			},
			types: {
				type: String,
				default: 'defalut' //defalut默认展位图   goods商品占位图    user用户占位图
			},
			spa: {
				default: '0',
				type: String,
			},
			size: {
				//宽高默认30
				type: [Number, String, Array],
				default: ''
			},
			radius: {
				type: String,
				default: '',
			},
			mode: {
				type: String,
				default: 'aspectFill',
				/**
				 * 缩放
				 * scaleToFill   --- 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
				 * aspectFit   --- 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
				 * aspectFill   --- 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
				 * widthFix   --- 宽度不变，高度自动变化，保持原图宽高比不变
				 * heightFix   --- 高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3。
				 * 裁剪 --- 不缩放图片
				 * bottom，center，left，right，top left，top right，bottom left，bottom right
				 */
			},
		},
		watch: {
			src(val) {
				this.urls = val
			},
		},
		computed: {
			defaultImg() {
				const res = {
					'defalut': imagedefault,
					'user': userdefault,
				} [this.types]
				return res
			},
			style() {
				let style = {},
					width = 30,
					height = 30;
				const radius = this.radius.split(" ").filter(x => x);
				const spa = this.spa.split(" ").filter(x => x);
				if (this.size) {
					if (array(this.size)) {
						width = this.size[0]
						height = this.size[1]
					} else {
						height = width = this.size.toString()
					}
					style.width = `${width}rpx`
					style.height = `${height}rpx`
				}
				if (this.radius) {
					style.borderRadius = radius.map(n => `${n}rpx`).join(' ')
				}
				if (this.spa) {
					style.margin = spa.map(n => `${n}rpx`).join(' ')
				}
				return style
			}
		},
		methods: {
			// 预览大图
			previewImage() {
				if (this.urls && this.isPreview) {
					uni.previewImage({
						urls: [this.urls],
					});
				}
			},
			onLoads() {
			},
			// 加载错误
			onErrors(e) {
				this.urls = imagedefault;
			},
		},
	}
</script>

<style>

</style>